<template>
  <div class="index-container">
    <el-row :gutter="12">
      <page-header :dbnum="dbnum" :warnnum="warnnum" />
      <el-col :lg="24">
        <icon-list />
      </el-col>
      <el-col :lg="12">
        <notice @dbnumfnc="dbnumfnc" @warnnumfnc="warnnumfnc" />
      </el-col>
      <el-col :lg="12">
        <access />
      </el-col>
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :lg="24">
        <authorization />
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import PageHeader from "./components/PageHeader.vue";
import Access from "./components/Access.vue";
// import Authorization from './components/Authorization'
import IconList from "./components/IconList.vue";
import Notice from "./components/Notice.vue";
import { getEnumData, getTableColumnData } from "@/api/modules/user.ts";

export default {
  name: "WorkbenchList",
  components: {
    PageHeader,
    Access,
    // Authorization,
    IconList,
    Notice
  },
  setup() {
    const state = reactive({
      localStorageMenuRes: [],
      dbnum: "",
      warnnum: ""
    });

    const fetchEnumData = async () => {
      const res = await getEnumData();
      localStorage.setItem("localStorageEnumData", JSON.stringify(res.data));
    };

    const fetchTableColumns = async () => {
      const res = await getTableColumnData();
      localStorage.setItem("localStorageTableColumnData", JSON.stringify(res.data));
    };

    const dbnumfnc = num => {
      state.dbnum = num;
    };

    const warnnumfnc = jgnum => {
      state.warnnum = jgnum;
    };

    onMounted(() => {
      fetchEnumData();
      fetchTableColumns();
    });

    return {
      ...toRefs(state),
      dbnumfnc,
      warnnumfnc
    };
  }
};
</script>

<style lang="scss" scoped>
.index-container {
  //background: $base-color-background !important;
  :deep() {
    .page-header {
      margin-bottom: 12px;
    }
    .access,
    .authorization,
    .version-information {
      min-height: 449px;
      margin-bottom: 20px;
    }
    .el-card {
      .el-card__header {
        position: relative;
        .card-header-tag {
          position: absolute;
          top: 15px;

          //right: $base-margin;
        }
        > div > span {
          display: flex;
          align-items: center;
          i {
            margin-right: 3px;
          }
        }
      }
      .el-card__body {
        position: relative;
        .echarts {
          width: 100%;
          height: 42vh;
          min-height: 400px;
        }
        .card-footer-tag {
          position: absolute;

          //right: $base-margin;
          bottom: 15px;
        }
      }
    }
    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;

      //border-top: 1px solid $base-border-color;
    }
  }
}
</style>
